<template>
  <div class="order">
          <div class="content">
              <div class="list" v-for="(keys,index) in list" :key="index" @click="refund_details(index)">
                  <div class="state">{{keys.state}}</div>
                  <div class="info"  >
                      <image :src="keys.img" alt=""/>
                      <div class="info_r">
                          <div class="title">{{keys.title}}</div>
                          <div class="specifications">
                            <div class="Specifications_l">{{keys.Specifications}}</div>
                            <div class="Specifications_r">{{keys.refund}}</div>
                          </div>
                      </div>
                  </div>
                  <div class="total">
                      <div class="total_info">
                          <div class="num">共{{keys.num}}件商品</div>
                          <div class="price">合计：¥{{keys.price}}</div>
                      </div>
                  </div>
              </div>
          </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
        list:[
          {state:'等待买家付款',img:'/static/images/img.png',title:'童装女童套装儿童春装2019新款品牌童装小女孩韩版潮衣时髦牛仔运动休新款品牌童装小女孩韩版潮衣时髦牛仔运动休',Specifications:'规格规格',num:'2',price:'118.02',refund:'退款中'},
          {state:'待发货',img:'/static/images/img.png',title:'童装女童套装儿童春装2019新款品牌童装小女孩韩版潮衣时髦牛仔运动休新款品牌童装小女孩韩版潮衣时髦牛仔运动休',Specifications:'规格规格',num:'2',price:'118.02',refund:'退货中'},
          {state:'卖家已发货',img:'/static/images/img.png',title:'童装女童套装儿童春装2019新款品牌童装小女孩韩版潮衣时髦牛仔运动休新款品牌童装小女孩韩版潮衣时髦牛仔运动休',Specifications:'规格规格',num:'2',price:'118.02',refund:'换货中'},
          {state:'交易成功',date:1,img:'/static/images/img.png',title:'童装女童套装儿童春装2019新款品牌童装小女孩韩版潮衣时髦牛仔运动休新款品牌童装小女孩韩版潮衣时髦牛仔运动休',Specifications:'规格规格',num:'2',price:'118.02',refund:'退款中'},
          {state:'交易成功',date:0,img:'/static/images/img.png',title:'童装女童套装儿童春装2019新款品牌童装小女孩韩版潮衣时髦牛仔运动休新款品牌童装小女孩韩版潮衣时髦牛仔运动休',Specifications:'规格规格',num:'2',price:'118.02',refund:'退款中'},
          {state:'交易关闭',img:'/static/images/img.png',title:'童装女童套装儿童春装2019新款品牌童装小女孩韩版潮衣时髦牛仔运动休新款品牌童装小女孩韩版潮衣时髦牛仔运动休',Specifications:'规格规格',num:'2',price:'118.02',refund:'退款中'}
        ]
    }
  },
  methods: {
        refund_details(index){
            let refund = this.list[index].refund
            wx.navigateTo({
              url: '/pages/refund_details/main?index='+index+'&refund='+refund
            })
        }
  },
  created () {
    // let app = getApp()
  },
  onLoad(options){
   
  }
}
</script>

<style scoped lang="less">
  .order{
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    .content{
      width: 100%;
      .list{
        width: 100%;
        // height: 408rpx;
        background: #fff;
        margin-bottom: 20rpx;
        padding: 32rpx 30rpx 0 30rpx;
        box-sizing: border-box;
        font-size:26rpx;
        color: #333;
        .info{
          width: 100%;
          margin: 22rpx 0 10rpx 0;
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          image{
            width: 150rpx;
            height: 150rpx;
          }
          .info_r{
            width: 515rpx;
            height: 150rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .title{
              overflow:hidden;
              text-overflow: ellipsis;//显示省略号
              display:-webkit-box;
              -webkit-line-clamp:2;//块元素显示的文本行数
              -webkit-box-orient:vertical;
            }
            .specifications{
              margin-bottom: 10rpx;
              color: #FF3D4F;
              font-size: 24rpx;
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .Specifications_l{
                color: #999
              }
              
            }
          }
        }
        .total{
          width: 100%;
          height: 68rpx;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          // border-bottom:2rpx solid rgba(204,204,204,1);
          .total_info{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .price{
              margin-left: 36rpx;
            }
          }
        }
        .change_total{
          width: 100%;
          height: 90rpx;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          .change_info{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .box{
              width:140rpx;
              height:60rpx;
              border:2rpx solid rgba(112,112,112,1);
              border-radius:30rpx;
              line-height: 60rpx;
              text-align: center;
            }
          }
        }
      }
    }
  }
 
</style>
